<template>
    <div class="home">
        <div class='headers'>
            <div class='headers-main'>
                <Header></Header>
                <van-tabs v-model="selectedId" animated swipeable @change='changeTab($event)'>
                    <van-tab :title="item.label" v-for="(item,index) in items" :key="index"></van-tab>
                </van-tabs>
            </div>
        </div>
        <!-- 推荐模块 -->
        <section>
            <keep-alive>
                <router-view v-if="selectedId == $route.meta.type"></router-view>
            </keep-alive>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import BigPao from '@/components/home/BigPao.vue'
import Header from '@/components/home/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import { getTopBarList } from '@/common/api/index.js'
export default {
    name: "Home",
    data () {
        return {
            selectedId: localStorage.getItem('tabBar'),
            items: []
        }
    },
    components: {
        Header,
        Tabbar,
        BigPao
    },
    activated () {

    },
    mounted () {
        this.getData()
    },
    methods: {
        async getData () {
            let res = await getTopBarList()
            this.items = res.data
            this.changeTab(this.selectedId, 1)
        },
        changeTab (index, type = 0) {
            if (type == 1) {
                console.log('111');
                this.$router.push(`/home`)
            } else {
                this.selectedId = index
                localStorage.setItem('tabBar', index)
                let item = this.items.find((item, index1) => {
                    return index == index1
                })
                this.$router.push(`/home/${item.name}`)
            }
            this.$store.state.path.tabBar = index
        }
    }
};
</script>

<style scoped>
.home {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.headers {
    width: 100%;
    height: 2.88rem;
}
.headers-main {
    position: fixed;
    left: 0;
    top: 0;
}
section {
    flex: 1;
    overflow: hidden;
}
</style>